<template>
  <div class="preview">
    <el-dialog
      :visible.sync="isPreview.data"
      width="1100px"
      top="10vh"
      ref="preview"
      @open="handleShow"
      @closed="handleHide"
    >
      <div class="preview-main dec-scrollbar">
        <div class="p-main" :style="pMainStyle">
          <components
            v-for="(item, i) in componentData"
            :key="item.id"
            :is="item.component"
            :style="{ ...item.style, 'z-index': i + 1 }"
            :propValue="item.propValue"
            @click.native="handleClick(item.events)"
            @dblclick.native="handleDblclick(item.events)"
            @change.native="handleChange(item.events)"
          ></components>
        </div>
      </div>
      <el-button
        type="primary"
        class="close"
        @click="setPreview(false)"
        v-if="!isScreenshot"
        >关闭</el-button
      >
      <div v-else class="save">
        <el-button type="primary" @click="savePreviewShot">保存截图</el-button>
        <el-button type="info" @click="setPreview(false)">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import html2canvas from "html2canvas";
import {
  listenGlobalKeydown,
  removeGlobalKeydown,
} from "@/utils/shortcutKey.js";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState([
      "componentData",
      "isPreview",
      "canvasStyleData",
      "isScreenshot",
    ]),
    ...mapGetters(["formatCanvasStyle"]),
    pMainStyle() {
      return {
        width: this.formatCanvasStyle.width,
        height: this.formatCanvasStyle.height,
      };
    },
  },
  methods: {
    ...mapMutations(["setPreview"]),
    handleClick(events) {
      if (events.click == undefined) return;
      eval(events.click);
    },
    handleDblclick(events) {
      if (events.dblclick == undefined) return;
      eval(events.dblclick);
    },
    handleChange(events) {
      if (events.change == undefined) return;
      eval(events.change);
    },
    savePreviewShot() {
      const shareContent = this.$refs.preview.$el.querySelector(".p-main");
      const opts = {
        useCORS: true,
      };

      html2canvas(shareContent, opts).then((canvas) => {
        const imgSrc = canvas.toDataURL("image/png");
        this.canvasImg = imgSrc;
      });

      setTimeout(() => {
        this.downloadImg(this.canvasImg);
      }, 2000);
    },
    downloadImg(dataUrl) {
      const a = document.createElement("a");
      a.setAttribute("download", "screenshot");
      a.href = dataUrl;
      a.click();
    },
    // 处理展示弹出框的事件
    handleShow() {
      // 取消全局快捷键
      removeGlobalKeydown();
    },
    handleHide() {
      listenGlobalKeydown();
    },
  },
};
</script>

<style lang="less" scoped>
.preview-main {
  height: 400px;
  overflow-y: auto;

  .p-main {
    position: relative;
    overflow: hidden;
  }
}
.close {
  position: fixed;
  top: 74px;
  right: 100px;
}
.save {
  position: absolute;
  bottom: -50px;
  right: 0;
}
</style>
